<!DOCTYPE html>
<html lang="en">

<head>
    @@include("include/header.htm",{ "title":"websocket"})
</head>

<body>
    <!-- 现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，
    然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，
    然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
    HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。 -->

    <!-- 我们再总结一下websocket与stomp的优点 
        websocket相对于http的优点:
        1.server与client都可以发送消息.而http:只能client发送消息；
        2.消息体更轻量。http的每次请求都要加很多的header，而websocket不需要

        stomp协议的websocket通信 相对于websocket的优点:（扩展Socket.io。如果你使用Node.js做服务端，那么毫无疑问你该选择Socket.IO，它本省就是从Node.js开始的）
        不需要自己去规定消息的格式, 以及对消息的格式做解析.
        由于stomp是一个统一的标准, 有很多库与厂商都对stomp协议进行了支持. 拿来用就可以. 成本低, 扩展好.
-->



    <!-- http://www.cnblogs.com/qdhxhz/p/9452237.html -->

    <!-- 帆布指纹识别 -->


</body>

<script src="//cdn.bootcss.com/sockjs-client/1.1.4/sockjs.js"></script>
<script src="//cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
<script type="text/javascript">
    var Socket = new WebSocket(url, [protocol]);
    //指定连接的 URL.第二个参数 protocol 是可选的，指定了可接受的子协议。
    socket.onopen = function() {
        console.log("连接建立时触发");
        Socket.send("发送数据");
    };
    socket.onmessage = function(event) {
        console.log('客户端接收服务端数据时触发');
        var received_msg = evt.data; //接收数据
    };
    socket.onclose = function(event) {
        console.log('连接关闭时触发');
    };
    // 连接发生错误
    socket.onerror = function() {
            alert("通信发生错误时触发");
        }
        //stomp协议的websocket通信
    var stompClient = Stomp.over(socket);
    // 不需要自己去规定消息的格式, 以及对消息的格式做解析.

    stompClient.connect({}, function(frame) { //向服务器发起websocket连接
        // 上线通知
        stompClient.subscribe('/room/' + g_roomId + '/connect', function( //广播
            message) {
            var msgObj = JSON.parse(message.body);
            console.log(msgObj);

        });
        // 下线通知
        stompClient.subscribe('/room/' + g_roomId + '/disconnect', function( //主题
            message) {
            var msgObj = JSON.parse(message.body);

        });
        // 消息通知
        stompClient.subscribe('/room/' + g_roomId + '/roomMsg', function(
            message) {
            var msgObj = JSON.parse(message.body);
            var msgData = msgObj.data;
            if (msgObj.event == "MSG_BACK") { //撤回消息
                var liveMessageList = "liveMessageList-" + msgData;
                $("#" + liveMessageList).remove();
            } else {
                var sd = [];
                sd.push(msgData);
                insertMsgsToHtml("messageTpl", "liveMessageList", sd, "prepend");
            }
        });
        // 房间配置
        stompClient.subscribe('/room/' + g_roomId + '/roomConfig', function(
            message) {
            var msgObj = JSON.parse(message.body);
            var msgData = msgObj.data;
            console.log(message); //videoLive
        });
    });
    // http://zb-test.cf69.com/
    //http://zb-test.cf69.com/front/login.do     zhibo/zb123

    //vue 写法
    //先安装 sockjs-client 和 stompjs
    import SockJS from 'sockjs-client';
    import Stomp from 'stompjs';
    export default {
        data() {
            return {
                stompClient: '',
                timer: '',
            }
        },
        methods: {
            initWebSocket() {
                this.connection(); //建立连接方法
                let that = this;
                // 断开重连机制,尝试发送消息,捕获异常发生时重连
                this.timer = setInterval(() => {
                    try {
                        that.stompClient.send("test");
                    } catch (err) {
                        console.log("断线了: " + err);
                        that.connection();
                    }
                }, 5000);
            },
            connection() {
                // 建立连接对象
                let socket = new SockJS('http://192.168.33.21:5500/');
                // 获取STOMP子协议的客户端对象
                this.stompClient = Stomp.over(socket);
                // 定义客户端的认证信息,按需求配置
                let headers = {
                        Authorization: ''
                    }
                    // 向服务器发起websocket连接
                this.stompClient.connect(headers, () => {
                    this.stompClient.subscribe('/topic/public', (msg) => { //
                        console.log('广播成功')
                        console.log(msg); // msg.body存放的是服务端发送给我们的信息
                    }, headers);
                    this.stompClient.send("/app/chat.addUser",
                            headers,
                            JSON.stringify({
                                sender: '',
                                chatType: 'JOIN'
                            }),
                        ) //用户加入接口
                }, (err) => {
                    // 连接发生错误时的处理函数
                    console.log('失败')
                    console.log(err);
                });
            }, //连接 后台
            disconnect() {
                if (this.stompClient) {
                    this.stompClient.disconnect();
                }
            }, // 断开连接
        },
        mounted() { //载入后生命周期函数
            this.initWebSocket();
        },
        beforeDestroy: function() { //销毁前生命周期函数
            // 页面离开时断开连接,清除定时器
            this.disconnect();
            clearInterval(this.timer);
        }
    }
</script>

</html>